<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"/>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!--表格-->
    <el-table
            :data="students"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">

        <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
        </el-table-column>
        <el-table-column
                prop="studentNo"
                label="学号"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="studentName"
                width="80"
                label="姓名"
                align="center"
               >
        </el-table-column>
        <el-table-column
                prop="phone"
                width="180"
                align="center"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别"
                align="center"
                width="50">
        </el-table-column>
        <el-table-column
                prop="status"
                label="当前状态"
                align="center"
                width="180">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status==1">启用</el-tag>
                <el-tag v-if="scope.row.status==0" type="danger">禁用</el-tag>
            </template>

        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data : {
            title:'',
            baseUrl:'/studentweb/student',
            formLabelWidth: '120px',
            //分页
            pageSize:10,
            total:0,
            currentPage: 1,
            dialogFormVisible: false,

            studentForm:{
                id:undefined,
                studentNo:undefined,
                studentName:undefined,
                phone:undefined,
                gender:undefined,
                status:'1'
            },
            students: [],
        },
        mounted(){
          this.getStudentList();
        },
        methods:{
            getStudentList() {

                //1.获取表格对象
                var table = document.getElementById("studentTable");

                //2.发送ajax请求
                axios({
                    url: this.baseUrl+'/list?'+new Date().getTime()+'&pageSize='+this.pageSize+'&currentPage='+this.currentPage,
                    method: 'POST',
                }).then((response) => {
                    //3.获取响应数据
                    this.students = response.data.data.rows;
                    this.total = response.data.data.total;
                    this.currentPage = response.data.data.currentPage;
                    this.pageSize = response.data.data.pageSize;
                })

            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getStudentList()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getStudentList()
                console.log(`当前页: ${val}`);
            },
            handleSelectionChange(val) {

                this.brandIds = []
                for (let i = 0; i < val.length; ++i) {
                    this.brandIds[i] = val[i].id
                }
            }
        }
    })
</script>
</body>
</html>